<template>
  <el-menu
    style="width: auto"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    :collapse="!$store.state.isCollapse"
    :collapse-transition="true"
    router
  >
    <div class="title">
      {{ $store.state.isCollapse ? "通用后台管理系统" : "后台" }}
    </div>
    <el-menu-item
      :index="item.path"
      v-for="item in noChildren()"
      :key="item.path"
    >
      <component :is="item.icon" class="icons"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>

    <el-sub-menu
      :index="item.label"
      v-for="item in hasChildren()"
      :key="item.label"
    >
      <template #title>
        <component :is="item.icon" class="icons"></component>
        <span>{{ item.label }}</span>
      </template>

      <el-menu-item-group>
        <el-menu-item
          :index="item.path"
          v-for="item in item.children"
          :key="item.label"
          >{{ item.label }}</el-menu-item
        >
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script>
export default {
  setup() {
    const list = [
      {
        path: "/home",
        name: "home",
        label: "首页",
        icon: "home-filled",
        url: "home/index",
      },
      {
        path: "/mall",
        name: "mall",
        label: "商品管理",
        icon: "video-play",
        url: "mall/index",
      },
      {
        path: "/user",
        name: "user",
        label: "用户管理",
        icon: "user",
        url: "User/index",
      },
      {
        path: "/music",
        name: "music",
        label: "音乐播放器",
        icon: "CaretRight",
        url: "music/index",
      },
      {
        label: "其他",
        icon: "location",
        children: [
          {
            path: "/page1",
            name: "page1",
            label: "页面1",
            icon: "setting",
            url: "other/pageOne.vue",
          },
          {
            path: "/page2",
            name: "page2",
            label: "页面2",
            icon: "setting",
            url: "other/pageTwo.vue",
          },
        ],
      },
    ];

    const noChildren = () => {
      return list.filter((item) => !item.children);
    };
    const hasChildren = () => {
      return list.filter((item) => item.children);
    };
    return {
      noChildren,
      hasChildren,
    };
  },
};
</script>

<style scoped>
.icons {
  width: 24px;
  height: 24px;
  margin-right: 5px;
}
.title {
  text-align: center;
  color: #fff;
  font-weight: 700;
  padding: 20px 0;
  font-size: 18px;
}
</style>